<template>
    <div class="login">
        <p v-if="msg" class="msg">提示信息：{{msg}}</p>
        <input type="text" v-model="form.username" 
        @blur="checkUserName"
        placeholder="请输入您的账户">
        <input type="text" v-model="form.password" placeholder="请输入您的密码">
        <button @click='login'>登陆</button>
        <button @click='register'>注册</button>

    </div>
</template>
<script>
import Api from '@/api/messageboard'
export default {
    data(){
        return {
            form:{
                username:'',
                password:''
            },
            msg:''
        }
    },
    methods:{
        checkUserName(){
            Api.checkUserName(this.form).then( res => {
                if(res.status === -1){
                    return this.msg = '用户名不可用'
                }else{
                    return this.msg = '用户名可用'
                }
            })
        },
        login(){
            Api.login(this.form).then( res => {
                if(res.status === -1){
                    return this.msg = '登录失败！'
                }else{
                    this.$router.push('/')
                }
            })
        },
        register(){
            Api.register(this.form).then( res => {
                if(res.status === -1){
                    return this.msg = '注册失败'
                }else{
                    return this.msg = '注册成功！请登录'
                }
            })
        }
    }
}
</script>
<style lang="stylus" scoped>
    .login
        width 500px
        margin 0 auto
        .msg 
            color red 
            font-size 16px 
            font-weight 900
        input 
            margin-top 20px
        button 
            margin-top 20px
</style>
